<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>vuew-router的基本使用 | 诶无痕和诶有痕</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="路由的重定项12345678910&amp;#123;    path: &amp;#x27;&#x2F;&amp;#x27;,    name: &amp;#x27;home&amp;#x27;,    &#x2F;&#x2F; 重定向到role,role是已经配置了的路由    redirect:&quot;&#x2F;role&quot;,    &#x2F;&#x2F; 重定向还可以是一个函数    &#x2F;&#x2F; redirect:() &#x3D;&gt; &amp;#123;    &#x2F;&#x2F;   return &amp;">
<meta property="og:type" content="article">
<meta property="og:title" content="vuew-router的基本使用">
<meta property="og:url" content="http://example.com/2022/03/22/vuew-router%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/index.html">
<meta property="og:site_name" content="诶无痕和诶有痕">
<meta property="og:description" content="路由的重定项12345678910&amp;#123;    path: &amp;#x27;&#x2F;&amp;#x27;,    name: &amp;#x27;home&amp;#x27;,    &#x2F;&#x2F; 重定向到role,role是已经配置了的路由    redirect:&quot;&#x2F;role&quot;,    &#x2F;&#x2F; 重定向还可以是一个函数    &#x2F;&#x2F; redirect:() &#x3D;&gt; &amp;#123;    &#x2F;&#x2F;   return &amp;">
<meta property="og:locale" content="zh_CH">
<meta property="article:published_time" content="2022-03-22T14:03:08.000Z">
<meta property="article:modified_time" content="2022-03-22T14:13:04.892Z">
<meta property="article:author" content="诶无痕和诶有痕">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="诶无痕和诶有痕" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 5.4.1"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">诶无痕和诶有痕</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-vuew-router的基本使用" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/22/vuew-router%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/" class="article-date">
  <time datetime="2022-03-22T14:03:08.000Z" itemprop="datePublished">2022-03-22</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      vuew-router的基本使用
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="路由的重定项"><a href="#路由的重定项" class="headerlink" title="路由的重定项"></a>路由的重定项</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    path: &#x27;/&#x27;,</span><br><span class="line">    name: &#x27;home&#x27;,</span><br><span class="line">    // 重定向到role,role是已经配置了的路由</span><br><span class="line">    redirect:&quot;/role&quot;,</span><br><span class="line">    // 重定向还可以是一个函数</span><br><span class="line">    // redirect:() =&gt; &#123;</span><br><span class="line">    //   return &#123; path: &#x27;/role&#x27;, query: &#123; q: &quot;123&quot; &#125; &#125;</span><br><span class="line">    // &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h1 id="别名"><a href="#别名" class="headerlink" title="别名"></a>别名</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    path: &#x27;/&#x27;,</span><br><span class="line">    name: &#x27;home&#x27;,</span><br><span class="line">    // 重定向到role</span><br><span class="line">    redirect:&quot;/role&quot;,</span><br><span class="line">    // 别名  别名可以通过用数组使用多个别名</span><br><span class="line">    // 将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /</span><br><span class="line">    // 想要地址栏变成别名，前面就要使用别名跳转，这样他就显示的时别名(/home)，但实际上时访问的 /</span><br><span class="line">    alias: [&#x27;/home&#x27;,&#x27;/name&#x27;],</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h1 id="通配路径"><a href="#通配路径" class="headerlink" title="通配路径"></a>通配路径</h1><p>通过正则匹配有相同点的路径</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下</span><br><span class="line">//被匹配到的路径会被存放到pathMatch这个变量中，可以通过$route.params.pathMatch获取</span><br><span class="line">  // &#123; path: &#x27;/:pathMatch(.*)*&#x27;, name: &#x27;NotFound&#x27;, component: NotFound &#125;,</span><br><span class="line">  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下</span><br><span class="line">  // &#123; path: &#x27;/user-:afterUser(.*)&#x27;, component: UserGeneric &#125;,</span><br></pre></td></tr></table></figure>
<h1 id="动态传参"><a href="#动态传参" class="headerlink" title="动态传参"></a>动态传参</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    // 动态传参</span><br><span class="line">    // 传递的参数可以在对应的组件中通过this.$route.params</span><br><span class="line">    // 使用动态传参是路径上必须有对应的数据，</span><br><span class="line">    path: &#x27;/role/:id&#x27;,</span><br><span class="line">    name: &#x27;role&#x27;,</span><br><span class="line">    component:()=&gt; import(/* webpackChunkName: &quot;content&quot; */ &quot;../views/RoleManage.vue&quot;)</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h2 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h2><p>1.没有硬编码的 URL<br>2.params 的自动编码/解码。<br>3. 防止你在 url 中出现打字错误<br>4. 绕过路径排序（如显示一个）</p>
<h2 id="router-link和this-route-push"><a href="#router-link和this-route-push" class="headerlink" title="router-link和this.$route.push"></a>router-link和this.$route.push</h2><p>链接命名路由 通过to传递一个对象<br><router-link class="router-link" :to="{name:'role',params: { id: 1 }}"></router-link><br>这样通过动态路由传递数据时要通过params了<br>这和router.push({ name: ‘user’, params: { username: ‘erina’ } })是一样的</p>
<h1 id="二级路由"><a href="#二级路由" class="headerlink" title="二级路由"></a>二级路由</h1><p>// 以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL<br>// 1.路由配置页面，设置默认路由，然后你想在哪个页面写嵌套路由，就在这个路由中写子路由<br>// 2.子路由跳转及其展示，router-link，帮助我们操作要在router-view中展示的子路由页面</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    path: &#x27;/userlist&#x27;,</span><br><span class="line">    name: &#x27;userlist&#x27;,</span><br><span class="line">    component:()=&gt; import(/* webpackChunkName: &quot;content&quot; */ &quot;../views/UserList.vue&quot;),</span><br><span class="line">    // 二级路由要写到对应的路由配置项下面才行</span><br><span class="line">      children:[</span><br><span class="line">      // 当 /userlist/notfound 匹配成功</span><br><span class="line">      // NotFound 将被渲染到 App.vue 的 &lt;router-view&gt; 内部</span><br><span class="line">      // component引入组件</span><br><span class="line">      &#123; path: &#x27;notfound&#x27;, component:NotFound&#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<p>对应二级路由的使用</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    用户列表</span><br><span class="line">    // 二级路由要设置一个单独的router-view</span><br><span class="line">    &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;!-- 路径要包括二级路由的路径，即一级路由路径/二级路由路径 --&gt;</span><br><span class="line">    &lt;router-link to=&#x27;/userlist/notfound&#x27;&gt;二级路由&lt;/router-link&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<h1 id="声明式导航"><a href="#声明式导航" class="headerlink" title="声明式导航"></a>声明式导航</h1><!-- 点击router-link时内部会调用this.$route.push -->
<!-- 由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。 -->
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;left-bar&quot;&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &lt;li&gt;</span><br><span class="line">        &lt;span class=&quot;main-title&quot;&gt;系统账号管理&lt;/span&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;!-- 声明式导航 --&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; to=&quot;/system/系统账号管理/平台账号管理&quot;&gt;平台账号管理&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;!-- 在路由表中是动态传参，那么在使用router-link时也要传递参数 --&gt;</span><br><span class="line">            &lt;!-- 点击router-link时内部会调用this.$route.push --&gt;</span><br><span class="line">            &lt;!-- 由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。 --&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; :to=&quot;&#123;name:&#x27;role&#x27;,params: &#123; id: 1 &#125;&#125;&quot;&gt;角色管理&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line">      &lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h1 id="页面跳转"><a href="#页面跳转" class="headerlink" title="页面跳转"></a>页面跳转</h1><h2 id="push"><a href="#push" class="headerlink" title="push"></a>push</h2><h3 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h3><p>// 通过push跳转的页面会有历史记录的<br>      // 只有一个路径作为参数时，直接传参，多个参数时使用对象传参<br>      // this.$router.push(‘/users/eduardo’)</p>
<pre><code>        // &lt;!-- router.push 和所有其他导航方法都会返回一个 Promise，
        // 让我们可以等到导航完成后才知道是成功还是失败。 --&gt;
</code></pre>
<h3 id="传参"><a href="#传参" class="headerlink" title="传参"></a>传参</h3><pre><code>   // path与query一起使用，当path存在时params将会被忽略
  // this.$router.push(&#123;path:&#39;/ok&#39;,query:&#123;plan: &#39;private&#39;&#125;&#125;)

  // 通过反引号输入path
  const pat = &#39;/ok&#39;;
  this.$router.push(&#123;path:`$&#123;pat&#125;`,query:&#123;plan: &#39;private&#39;&#125;&#125;)

  // name和params一起使用，通过命名路由跳转页面
  // this.$router.push(&#123; name: &#39;user&#39;, params: &#123; username: &#39;eduardo&#39; &#125; &#125;)

  // 传递的传参数可以是hash
  // this.$router.push(&#123; path: &#39;/about&#39;, hash: &#39;#team&#39; &#125;)
</code></pre>
<h2 id="replace"><a href="#replace" class="headerlink" title="replace"></a>replace</h2><pre><code>  // 通过replace跳转的页面(没有历史记录)
  // 历史记录中（1，2，3）中的3被替换成4--&gt;(1,2,4)
  // this.$router.replace()//作用和this.$router.push一样，（他把当前路径替换成replace中的路径）
  // 在历史记录中，也是将当前记录替换成replace中的
  // this.$router.replace(&#123; path: &#39;/ok&#39; &#125;)
</code></pre>
<h2 id="replace和push"><a href="#replace和push" class="headerlink" title="replace和push"></a>replace和push</h2><pre><code>  // router.push(&#123; path: &#39;/home&#39;, replace: true &#125;)
  // 相当于
  // router.replace(&#123; path: &#39;/home&#39; &#125;)
</code></pre>
<h2 id="go"><a href="#go" class="headerlink" title="go"></a>go</h2><pre><code>  // 通过go横跨页面，（当然也可以使用forworld()向前，back（）向后）
  // this.$router.go(1)
</code></pre>
<h2 id="获取传递的参数"><a href="#获取传递的参数" class="headerlink" title="获取传递的参数"></a>获取传递的参数</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;params:&#123;&#123;this.$route.params&#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;div&gt;query:&#123;&#123;this.$route.query&#125;&#125;&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;left-bar&quot;&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &lt;li&gt;</span><br><span class="line">        &lt;span class=&quot;main-title&quot;&gt;系统账号管理&lt;/span&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;!-- 声明式导航 --&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; to=&quot;/system/系统账号管理/平台账号管理&quot;&gt;平台账号管理&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;!-- 在路由表中时动态传参，那么在使用router-link时就要传递参数 --&gt;</span><br><span class="line">            &lt;!-- 点击router-link时内部会调用this.$route.push --&gt;</span><br><span class="line">            &lt;!-- 由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。 --&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; :to=&quot;&#123;name:&#x27;role&#x27;,params: &#123; id: 1 &#125;&#125;&quot;&gt;角色管理&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line">      &lt;/li&gt;</span><br><span class="line">      &lt;li&gt;</span><br><span class="line">        &lt;span class=&quot;main-title&quot;&gt;用户管理&lt;/span&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; to=&quot;/userreg&quot;&gt;用户注册&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; to=&quot;/userlist&quot;&gt;用户列表&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;button class=&quot;btn&quot; @click=&quot;toPage&quot;&gt;跳转到404&lt;/button&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line">      &lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  methods:&#123;</span><br><span class="line">    toPage:function() &#123;</span><br><span class="line">      // 通过push跳转的页面会有历史记录的</span><br><span class="line">      // 只有一个路径作为参数时，直接传参，多个参数时使用对象传参</span><br><span class="line">      // this.$router.push(&#x27;/users/eduardo&#x27;)</span><br><span class="line">            // &lt;!-- router.push 和所有其他导航方法都会返回一个 Promise，</span><br><span class="line">            // 让我们可以等到导航完成后才知道是成功还是失败。 --&gt;</span><br><span class="line">            // path与query一起使用，当path存在时params将会被忽略</span><br><span class="line">      // this.$router.push(&#123;path:&#x27;/ok&#x27;,query:&#123;plan: &#x27;private&#x27;&#125;&#125;)</span><br><span class="line">      // 通过反引号输入path</span><br><span class="line">      const pat = &#x27;/ok&#x27;;</span><br><span class="line">      this.$router.push(&#123;path:`$&#123;pat&#125;`,query:&#123;plan: &#x27;private&#x27;&#125;&#125;)</span><br><span class="line"></span><br><span class="line">      // name和params一起使用，通过命名路由跳转页面</span><br><span class="line">      // this.$router.push(&#123; name: &#x27;user&#x27;, params: &#123; username: &#x27;eduardo&#x27; &#125; &#125;)</span><br><span class="line"></span><br><span class="line">      // 传递的传参数可以是hash</span><br><span class="line">      // this.$router.push(&#123; path: &#x27;/about&#x27;, hash: &#x27;#team&#x27; &#125;)</span><br><span class="line"></span><br><span class="line">      // 通过replace跳转的页面(没有历史记录)</span><br><span class="line">      // 历史记录中（1，2，3）中的3被替换成4--&gt;(1,2,4)</span><br><span class="line">      // this.$router.replace()//作用和this.$router.push一样，（他把当前路径替换成replace中的路径）</span><br><span class="line">      // 在历史记录中，也是将当前记录替换成replace中的</span><br><span class="line">      // this.$router.replace(&#123; path: &#x27;/ok&#x27; &#125;)</span><br><span class="line"></span><br><span class="line">      // router.push(&#123; path: &#x27;/home&#x27;, replace: true &#125;)</span><br><span class="line">      // 相当于</span><br><span class="line">      // router.replace(&#123; path: &#x27;/home&#x27; &#125;)</span><br><span class="line"></span><br><span class="line">      // 通过go横跨页面，（当然也可以使用forworld()向前，back（）向后）</span><br><span class="line">      // this.$router.go(1)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line"></span><br><span class="line">ul,li&#123;</span><br><span class="line">  list-style: none;</span><br><span class="line">  text-decoration: none;</span><br><span class="line">  text-align: start;</span><br><span class="line">  padding: 0;</span><br><span class="line">  margin: 0;</span><br><span class="line">  width: 100%;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">.router-link &#123;</span><br><span class="line">  text-decoration: none;</span><br><span class="line">  color: #333;</span><br><span class="line">  height: 40px;</span><br><span class="line">  background-color: rgb(247,248,248);</span><br><span class="line">  display: block;</span><br><span class="line">  line-height: 40px;</span><br><span class="line">  font-size: 15px;</span><br><span class="line">  font-weight: bold;</span><br><span class="line">  padding-left: 30px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.left-bar .main-title &#123;</span><br><span class="line">  height: 60px;</span><br><span class="line">  display: block;</span><br><span class="line">  line-height: 60px;</span><br><span class="line">  font-size: 20px;</span><br><span class="line">  font-weight: bold;</span><br><span class="line">  padding-left: 15px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h1 id="首页布局代码"><a href="#首页布局代码" class="headerlink" title="首页布局代码"></a>首页布局代码</h1><p>/* 让容器沾满全屏的高度 <em>/<br>  height: 100vh;<br>/</em> 让容器占满剩余位置 */<br>  flex-grow: 1;<br>  <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;leftBar&quot;&gt;</span><br><span class="line">      &lt;LeftBar&gt;&lt;/LeftBar&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div class=&quot;rightContent&quot;&gt;</span><br><span class="line">      &lt;!-- 因只有一个页面，所以不论router-link和router-view写在哪里都是可以匹配的 --&gt;</span><br><span class="line">      &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import LeftBar from &#x27;./components/LeftBar.vue&#x27;</span><br><span class="line"></span><br><span class="line">export default&#123;</span><br><span class="line">  components:&#123;</span><br><span class="line">    LeftBar</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">#app &#123;</span><br><span class="line">  font-family: Avenir, Helvetica, Arial, sans-serif;</span><br><span class="line">  -webkit-font-smoothing: antialiased;</span><br><span class="line">  -moz-osx-font-smoothing: grayscale;</span><br><span class="line">  text-align: center;</span><br><span class="line">  color: #2c3e50;</span><br><span class="line">  width: 100%;</span><br><span class="line">  height: 100%;</span><br><span class="line">  display: flex;</span><br><span class="line">  /* 让容器沾满全屏 */</span><br><span class="line">  height: 100vh;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">nav &#123;</span><br><span class="line">  padding: 30px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">nav a &#123;</span><br><span class="line">  font-weight: bold;</span><br><span class="line">  color: #2c3e50;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">nav a.router-link-exact-active &#123;</span><br><span class="line">  color: #42b983;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.leftBar &#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.rightContent &#123;</span><br><span class="line">  /* 让容器占满剩余位置 */</span><br><span class="line">  flex-grow: 1;</span><br><span class="line">  border-left: 1px solid #333;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/22/vuew-router%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/" data-id="cl127vs2500014sw62kry9vm4" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2022/03/23/vuex%E5%AD%A6%E4%B9%A0/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          vuex学习
        
      </div>
    </a>
  
  
    <a href="/2022/03/22/vue-router%E7%9A%84%E5%88%9B%E5%BB%BA%E8%BF%87%E7%A8%8B/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">vue-router的创建过程</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/03/">March 2022</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2022/03/23/vuex%E5%AD%A6%E4%B9%A0/">vuex学习</a>
          </li>
        
          <li>
            <a href="/2022/03/22/vuew-router%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/">vuew-router的基本使用</a>
          </li>
        
          <li>
            <a href="/2022/03/22/vue-router%E7%9A%84%E5%88%9B%E5%BB%BA%E8%BF%87%E7%A8%8B/">vue-router的创建过程</a>
          </li>
        
          <li>
            <a href="/2022/03/20/axios%E5%AD%A6%E4%B9%A0/">axios学习</a>
          </li>
        
          <li>
            <a href="/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/">了解vue组件</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2022 诶无痕和诶有痕<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">

  
<script src="/fancybox/jquery.fancybox.pack.js"></script>




<script src="/js/script.js"></script>




  </div>
</body>
</html>